<template>
	<view class="comment-container">
		<!-- 评论展示组件 -->
		<view class="detail-comment">
		  <view class="comment-content-container" v-for="item in commentList" :key="item.comment_id">
		    <CommentBox @commentReply="commentReply" :commentData="item"></CommentBox>
		  </view>
		  <view class="no-data" v-if="!commentList.length">暂无评论</view>
		</view>
		<uni-load-more :contentText="{contentdown: '上拉显示更多',contentrefresh: '正在加载...',contentnomore: '没有更多评论'}"
		 v-if="commentList.length" :status="loading"></uni-load-more>
		<!-- 评论区域组件 -->
		<CommentMasker @sendCommentData="sendComment"
		 @closePopupMasker="closePopupMasker" :showPopup="popup"></CommentMasker>
	</view>
</template>

<script>
export default {
	onLoad(option) {
		this.articleId = option.articleId
		this.getComment()
	},
	onReachBottom() {
		// 页面到底
		if(this.loading === 'loading') {
			this.page++
			this.getComment()
		}
	},
	data(){
		return {
			popup:false,
			articleId:'',
			commentList:[],
			replyData:{},
			page:1,
			pageSize:4,
			loading:'loading'
		}
	},
	methods:{
		async getComment(){
			const result = await this.$http.get_comment({
				articleId:this.articleId,
				pageSize:this.pageSize,
				page:this.page
				})
			if(result.data || result.data.length) {
				this.loading='no-more'
			}
			let oldList = JSON.parse(JSON.stringify(this.commentList))
			oldList.push(...result.data)
			this.commentList = oldList
		},
		async sendComment(val){
			const obj = {
				userId:this.userInfo._id,
				articleId:this.articleId,
				comment:val,
				...this.replyData
			}
			// // 提交评论
			const result = await this.$http.update_comment(obj)

			uni.showToast({
				title:'评论成功',
				icon:'none'
			})
			this.page = 1
			this.commentList = []
			await this.getComment()
			this.popup = false
		},
		closePopupMasker(status) {
			// 关闭弹出框
			this.popup = status
		},
		commentReply(val){
			// 清空当前
			this.replyData = {}
			// 回复数据
			this.replyData = {
				comment_id:val.comment.comment_id,
				is_reply: val.isReply
			}
			// 当前为回复内容的时候添加回复的ID
			val.comment.reply_id && (this.replyData.reply_id = val.comment.reply_id)
			this.popup = true
		},
	}
}
</script>

<style lang="scss">
	@import '../articleDetail/css/articleDetail.scss'
</style>